<template>
  <div class="right">
            <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
      <el-button type="success" round style="margin-bottom: 15px"  @click="addForRoledialog = true" >添加角色</el-button>
    <!-- 表格 -->
  <el-table
    :data="roleFromList"
    style="width: 100%" border >
    <el-table-column type="expand" >
      <template slot-scope="scope">
        <div v-if="scope.row.children.length > 0">
        <el-row v-for="first in scope.row.children" :key="first.id" style="margin-top:10px; border-bottom: 1px solid #eee ">
          <el-col :span="4">
            <el-tag
             closable
             type="success"
              @close="delRinghtByid(scope.row,first.id)"
             >
             {{first.authName}}
           </el-tag>
          </el-col>
          <el-col :span="20">
            <el-row v-for="second in first.children" :key="second.id" style="margin-bottom:10px; border-bottom: 1px solid #eee" >
                <el-col :span="4">
            <el-tag
             closable
             type=""
             @close="delRinghtByid(scope.row,second.id)"
             >
             {{second.authName}}
           </el-tag>
                </el-col>
                <el-col :span="20" >
             <el-tag
             v-for="third in second.children" :key="third.id" style="margin-bottom:10px;"
             closable
             type="warning"
             @close="delRinghtByid(scope.row,third.id)"
             >
             {{third.authName}}
           </el-tag>
                </el-col>
            </el-row>
          </el-col>
          </el-row>
      </div>
      <div v-else >
        没有数据
      </div>
      </template>
    </el-table-column>
    <el-table-column
      label="角色名称"
      prop="roleName">
    </el-table-column>
    <el-table-column
      label="描述"
      prop="roleDesc">
    </el-table-column>
          <el-table-column label="操作">
        <template slot-scope="scope">
          <el-tooltip class="item"
                      effect="dark"
                      content="编辑"
                      placement="top">

            <el-button type="primary"
                       icon="el-icon-edit"
                     ></el-button>
          </el-tooltip>
          <el-tooltip class="item"
                      effect="dark"
                      content="分配权限"
                      placement="top"
                      >
            <el-button type="primary"
                       icon="el-icon-share"
                        @click="showAddRoleDialog(scope.row)"
                       ></el-button>
          </el-tooltip>
          <el-tooltip class="item"
                      effect="dark"
                      content="删除"
                      placement="top">
            <el-button type="primary"
                       icon="el-icon-delete"
                       >
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
  </el-table>
  <!-- 弹框 -->
<el-dialog title="修改权限" :visible.sync="addRoleDialogFormVisible">
    <el-tree
    ref="mytree"
  :data="roleTreeList"
  show-checkbox
  node-key="id"
  :default-expand-all="true"
  :default-expanded-keys="checkdeArr"
  :default-checked-keys="checkdeArr"
  :props="defaultProps">
</el-tree>
  <div slot="footer" class="dialog-footer">
    <el-button @click="addRoleDialogFormVisible=false" >取 消</el-button>
    <el-button type="primary" @click="grantRightSubmint" >确 定</el-button>
  </div>
</el-dialog>
   <!-- 添加角色对话框 -->
   <el-dialog title="添加角色" :visible.sync="addForRoledialog">
  <el-form :model="addForm" :label-width="'120px'" :rules="rules"  ref="addForm" >
    <el-form-item label="角色名称" prop="roleName" >
      <el-input v-model="addForm.roleName" auto-complete="off" ></el-input>
    </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc" >
      <el-input v-model="addForm.roleDesc" auto-complete="off" ></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="addForRoledialog = false">取 消</el-button>
    <el-button type="primary" @click="addRoles">确 定</el-button>
  </div>
</el-dialog>
  </div>
</template>
<script>

import { getRoleAllList, delRoleRightId, grandRoleForRight, addRoleById } from '@/api/role_api.js'
import { getRightsAllList } from '@/api/right.js'

export default {
  data () {
    return {
      addForm: {
        roleName: '',
        roleDesc: ''
      },
      addForRoledialog: false,
      roleId: '',
      addRoleDialogFormVisible: false,
      roleFromList: [],
      roleTreeList: [],
      checkdeArr: [],
      defaultProps: {
        children: 'children',
        label: 'authName'
      },
      rules: {
        roleName: [
          { required: true, message: '请输入角色名称', trigger: 'blur' }
        ],
        roleDesc: [
          { required: true, message: '角色描述', trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    // 角色数据更新
    init () {
      getRoleAllList()
        .then((res) => {
          // console.log(res)
          if (res.data.meta.status === 200) {
            this.roleFromList = res.data.data
          } else {
            this.$message({
              type: 'info',
              message: '没有数据请添加'
            })
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    delRinghtByid (row, rightId) {
      delRoleRightId(row.id, rightId)
        .then((res) => {
          console.log(res)
          if (res.data.meta.status === 200) {
            this.$message({
              type: 'success',
              message: res.data.meta.msg
            })
            // 实现局部刷新
            row.children = res.data.data
          } else {
            this.$message({
              type: 'info',
              message: res.data.meta.msg
            })
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    showAddRoleDialog (row) {
      this.roleId = row.id
      this.addRoleDialogFormVisible = true
      // 树形组件获取数据
      getRightsAllList('tree')
        .then((res) => {
          // console.log(res)
          if (res.data.meta.status === 200) {
            this.roleTreeList = res.data.data
            // 将之前的数据清空
            this.checkdeArr.length = 0
            // 获取权限对应的三级权限
            row.children.forEach((first, index) => {
              if (first.children && first.children.length > 0) {
                // 变量第二几权限
                first.children.forEach((second) => {
                  if (second.children && second.children.length > 0) {
                    // 遍历三级权限
                    second.children.forEach((third) => {
                      this.checkdeArr.push(third.id)
                    })
                  }
                })
              }
            })
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    grantRightSubmint () {
      let arr = this.$refs.mytree.getCheckedNodes()
      // console.log(arr)
      // 先获取id, pid(父级id)
      let temp = []
      for (let i = 0; i < arr.length; i++) {
        temp.push(arr[i].id + ',' + arr[i].pid)
      }
      let str = temp.join(',')
      // 转换为数组，只有数组可以去重
      let arr2 = str.split(',')
      // ...结构，放在数组里， new Set 去重，为对象
      let finalArr = [...new Set(arr2)]
      // console.log(finalArr.join())
      // 调用方法
      grandRoleForRight(this.roleId, finalArr.join())
        .then((res) => {
          // console.log(res)
          if (res.data.meta.status === 200) {
            this.$message({
              type: 'success',
              message: res.data.meta.msg
            })
            this.addRoleDialogFormVisible = false
            this.init()
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 添加角色
    addRoles () {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          addRoleById(this.addForm)
            .then((res) => {
              console.log(res)
              if (res.data.meta.status === 201) {
                this.$message({
                  type: 'success',
                  message: res.data.meta.msg
                })
                this.addForRoledialog = false
                this.init()
              }
            })
            .catch((err) => {
              console.log(err)
            })
        } else {
          this.$message({
            type: 'info',
            message: '请正确输入'
          })
          return false
        }
      })
    }
  }

}
</script>

<style lang="less" scoped>

</style>
